<template>
 
 <div id="container"></div>
 <Search></Search>
 <Controls></Controls>
 <CityWeather></CityWeather>
</template>

<script setup>
import Search from "./components/Search.vue";

import { onMounted, ref, provide } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import Controls from "./components/Controls.vue";
import CityWeather from "./components/CityWeather.vue";

const Amap = ref(null)
const map = ref(null)

onMounted(async () => {

window._AMapSecurityConfig = {
  securityJsCode: "2cf3c613f4f3514c6e2aad8f15a5981d",
};
 Amap.value = await AMapLoader.load({
  key: "3fd32fbf9e9ee6eefedb19a1b7d09385", 
  version: "2.0", 
  plugins: ["AMap.Scale",
       "AMap.AutoComplete", 
       "AMap.PlaceSearch",
       "AMap.Driving",
       "AMap.DragRoute",
       "AMap.ToolBar",
       "AMap.MapType",
       "AMap.MouseTool",
       "AMap.Geolocation",
       "AMap.CitySearch",
       "AMap.Weather"
      ], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
});
 map.value = new Amap.value.Map("container", {
  center: [115.9885, 36.43464],
  zoom: 15,
  viewMode: "3D",

  pitch: 60,
   mapStyle: "amap://styles/standard",
   
});



});

 provide('mapandAmap', {
    map,
   Amap,
  })
  
</script>

<style lang="scss"scoped>
 #container {
  position: relative;
    width: 100vw;
    height: 90vh;
 }
 
 


</style>